<template>
	<view class="video-player-container">
		<view class="video-wrapper" :class="{'fullscreen': isFullscreen}" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
			<!-- <video 
				:src="videoUrl" 
				:controls="false"
				:show-center-play-btn="true"
				:enable-progress-gesture="true"
				:show-fullscreen-btn="false"
				:show-play-btn="false"
				:show-progress="false"
				:object-fit="'contain'"
				@play="onPlay"
				@pause="onPause"
				@ended="onEnded"
				@timeupdate="onTimeUpdate"
				@fullscreenchange="onFullscreenChange"
				@volumechange="onVolumeChange"
				@touchstart="onTouchStart"
				@touchmove="onTouchMove"
				@touchend="onTouchEnd"
				ref="videoPlayer"
				class="video-player"
			></video> -->
			
<hao-playVideo ref="haoPlayVideo" :videoUrl="videoUrl"></hao-playVideo> 
			
			
			
		</view>
	</view>
</template>

<script>
export default {
	name: 'VideoPlayer',
	props: {
		videoUrl: {
			type: String,
			required: true
		},
		title: {
			type: String,
			default: ''
		},
		playlist: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			isPlaying: false,
			currentTime: 0,
			duration: 0,
			isFullscreen: false,
			showControls: true,
			controlsTimer: null,
			volume: 1,
			isMuted: false,
			showVolumeSlider: false,
			playbackSpeed: 1,
			showSpeedMenu: false,
			showQualityMenu: false,
			showPlaylist: false,
			currentVideoIndex: 0,
			currentQuality: '自动',
			qualities: [
				{ label: '自动', value: 'auto' },
				{ label: '1080P', value: '1080' },
				{ label: '720P', value: '720' },
				{ label: '480P', value: '480' }
			],
			speeds: [0.5, 0.75, 1, 1.25, 1.5, 2],
			showSeekPreview: false,
			seekTime: 0,
			seekDirection: 'forward',
			touchStartX: 0,
			touchStartTime: 0,
			seekInterval: null,
			isHovering: false
		}
	},
	mounted() {
		this.setupControlsTimer()
	},
	methods: {
		setupControlsTimer() {
			if (this.controlsTimer) {
				clearTimeout(this.controlsTimer)
			}
			if (!this.isHovering) {
				this.controlsTimer = setTimeout(() => {
					this.showControls = false
				}, 3000)
			}
		},
		resetControlsTimer() {
			clearTimeout(this.controlsTimer)
			this.showControls = true
			this.setupControlsTimer()
		},
		onMouseEnter() {
			this.isHovering = true
			this.showControls = true
			clearTimeout(this.controlsTimer)
		},
		onMouseLeave() {
			this.isHovering = false
			this.setupControlsTimer()
		},
		onPlay() {
			this.isPlaying = true
		},
		onPause() {
			this.isPlaying = false
		},
		onEnded() {
			this.isPlaying = false
			this.currentTime = 0
			// Auto play next video if available
			if (this.currentVideoIndex < this.playlist.length - 1) {
				this.playVideo(this.currentVideoIndex + 1)
			}
		},
		onTimeUpdate(e) {
			this.currentTime = e.detail.currentTime
			this.duration = e.detail.duration
		},
		onFullscreenChange(e) {
			this.isFullscreen = e.detail.fullScreen
		},
		onVolumeChange(e) {
			this.volume = e.detail.value
			this.$refs.videoPlayer.volume = this.volume
		},
		togglePlay() {
			if (this.isPlaying) {
				this.$refs.videoPlayer.pause()
			} else {
				this.$refs.videoPlayer.play()
			}
			this.resetControlsTimer()
		},
		toggleFullscreen() {
			this.$refs.videoPlayer.requestFullScreen()
		},
		toggleMute() {
			this.isMuted = !this.isMuted
			this.$refs.videoPlayer.muted = this.isMuted
		},
		toggleVolumeSlider() {
			this.showVolumeSlider = !this.showVolumeSlider
		},
		toggleSpeedMenu() {
			this.showSpeedMenu = !this.showSpeedMenu
			this.showQualityMenu = false
			this.showPlaylist = false
		},
		toggleQualityMenu() {
			this.showQualityMenu = !this.showQualityMenu
			this.showSpeedMenu = false
			this.showPlaylist = false
		},
		togglePlaylist() {
			this.showPlaylist = !this.showPlaylist
			this.showSpeedMenu = false
			this.showQualityMenu = false
		},
		changeSpeed(speed) {
			this.playbackSpeed = speed
			this.$refs.videoPlayer.playbackRate = speed
			this.showSpeedMenu = false
		},
		changeQuality(quality) {
			this.currentQuality = this.qualities.find(q => q.value === quality).label
			// Implement quality change logic here
			this.showQualityMenu = false
		},
		playVideo(index) {
			this.currentVideoIndex = index
			const video = this.playlist[index]
			this.$emit('video-change', video)
			this.showPlaylist = false
		},
		onSliderChange(e) {
			this.$refs.videoPlayer.seek(e.detail.value)
		},
		formatTime(seconds) {
			const minutes = Math.floor(seconds / 60)
			const remainingSeconds = Math.floor(seconds % 60)
			return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
		},
		seekForward() {
			const newTime = Math.min(this.currentTime + 10, this.duration)
			this.$refs.videoPlayer.seek(newTime)
		},
		seekBackward() {
			const newTime = Math.max(this.currentTime - 10, 0)
			this.$refs.videoPlayer.seek(newTime)
		},
		onTouchStart(e) {
			this.touchStartX = e.touches[0].clientX
			this.touchStartTime = this.currentTime
			this.showSeekPreview = true
		},
		onTouchMove(e) {
			const touchX = e.touches[0].clientX
			const diffX = touchX - this.touchStartX
			const seekAmount = Math.floor(diffX / 2) // 每2像素移动1秒
			
			this.seekTime = Math.max(0, Math.min(this.touchStartTime + seekAmount, this.duration))
			this.seekDirection = seekAmount > 0 ? 'forward' : 'rewind'
		},
		onTouchEnd() {
			if (this.seekTime !== this.currentTime) {
				this.$refs.videoPlayer.seek(this.seekTime)
			}
			this.showSeekPreview = false
		}
	}
}
</script>

<style lang="scss" scoped>
.video-player-container {
	width: 100%;
	background: #000;
	position: relative;
}

.video-wrapper {
	position: relative;
	width: 100%;
	
	&.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
	}
}

.video-player {
	width: 100%;
	height: 400rpx;
}

.custom-controls {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.4) 100%);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx;
	transition: opacity 0.3s ease;
	opacity: 1;
	
	&:not(:hover) {
		opacity: 0;
	}
	
	&:hover {
		opacity: 1;
	}
	
	.top-controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.video-title {
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
		}
		
		.quality-selector {
			color: #fff;
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			background: rgba(0,0,0,0.5);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;
		}
	}
	
	.center-controls {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 40rpx;
		
		.control-btn {
			font-size: 80rpx;
			color: #fff;
			opacity: 0.8;
			
			&.icon-rewind, &.icon-forward {
				font-size: 60rpx;
			}
			
			&:active {
				opacity: 1;
			}
		}
	}
	
	.bottom-controls {
		.progress-bar {
			margin-bottom: 20rpx;
			
			.time-display {
				display: flex;
				justify-content: flex-end;
				gap: 10rpx;
				color: #fff;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
		
		.control-buttons {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.left-controls {
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				.volume-slider {
					width: 100rpx;
				}
			}
			
			.control-btn {
				color: #fff;
				font-size: 40rpx;
				padding: 10rpx;
				opacity: 0.8;
				
				&:active {
					opacity: 1;
				}
			}
		}
	}
}

.quality-menu, .speed-menu {
	position: absolute;
	bottom: 120rpx;
	right: 20rpx;
	background: rgba(0,0,0,0.8);
	border-radius: 10rpx;
	padding: 10rpx;
	
	.quality-item, .speed-item {
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		
		&.active {
			color: #2196f3;
		}
	}
}

.playlist {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 60%;
	background: rgba(0,0,0,0.9);
	display: flex;
	flex-direction: column;
	
	.playlist-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		color: #fff;
		font-size: 28rpx;
		border-bottom: 1rpx solid rgba(255,255,255,0.1);
	}
	
	.playlist-content {
		flex: 1;
		overflow-y: auto;
		
		.playlist-item {
			display: flex;
			padding: 20rpx;
			gap: 20rpx;
			border-bottom: 1rpx solid rgba(255,255,255,0.1);
			
			&.active {
				background: rgba(33,150,243,0.1);
			}
			
			image {
				width: 160rpx;
				height: 90rpx;
				border-radius: 8rpx;
			}
			
			.playlist-item-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.title {
					color: #fff;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				
				.duration {
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
}

.seek-preview {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	padding: 20rpx 40rpx;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	
	.seek-time {
		color: #fff;
		font-size: 32rpx;
	}
	
	.seek-icon {
		color: #fff;
		font-size: 40rpx;
	}
}
</style> 